<template>
	<div class="lxl-uploadone" :class="{hide: value || list.length}">
		<el-upload
		action="#"
		:auto-upload="false"
		list-type="picture-card"
		:limit="1"
		:file-list="list"
		:on-change="changeIcon"
		:on-remove="removeIcon">
		<i class="el-icon-plus"></i>
		</el-upload>
	</div>
</template>

<script>
export default {
	name: 'LxLUploadOne',
	props: {
		fileList: {
			required: true
		},
		value: {
			required: true
		}
	},
	created () {
		this.list = this.fileList
	},
	data () {
		return {
			list: []
		}
	},
	methods: {
		changeIcon (file) {
			this.$emit('input', file.raw)
		},
		removeIcon () {
			this.$emit('input', null)
			this.list = []
		}
	}
}
</script>

<style lang="less" scoped>
.hide {
	/deep/ .el-upload--picture-card {
		display: none;
	}
}
</style>
